<template>
  <div>

    <div>
      <el-form >
        <el-row>
          <el-col :span="3">
            <el-input disabled="true" value="年份">
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-date-picker
              v-model="selectYear"
              value-format="yyyy"
              format="yyyy"
              type="year"
              placeholder="选择年份"
              @input="queryMonthSalary"
            >

            </el-date-picker>
          </el-col>


          <!--          <el-col :span="3">-->
          <!--            <el-form-item >-->
          <!--              <el-button @click="InitEmployeeSalaryChange">员工薪资修改</el-button>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="3">-->
          <!--            <el-form-item >-->
          <!--              <el-button @click="InitEmployeeSalaryChange">初始化薪资</el-button>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="3">-->

          <!--            <el-upload ref = 'upload' accept = '.xls,.xlsx'-->
          <!--                       action = '' :auto-upload = false-->
          <!--                       :on-change = handleUpload :show-file-list = false>-->
          <!--              <el-button slot = 'trigger' native-type = 'file' >-->
          <!--                导入历史年薪表-->
          <!--              </el-button>-->
          <!--            </el-upload>-->


          <!--          </el-col>-->
          <el-col :span="2">

            <el-button @click="exportExcel">导出年度薪资表</el-button>

          </el-col>
        </el-row>

      </el-form>
    </div>


    <div>
      <el-table
        :data="Emp_salary"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"
        @selection-change="handleAttendanceChange"
        id="out-table"
      >

        <el-table-column align="center" prop="salaryOrder" label="薪资序列" width="100" fixed></el-table-column>

        <el-table-column align="center" prop="userId" label="员工Id" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="role" label="权限" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="salaryMonth" label="年月" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="baseSalary" label="基础工资" width="75"></el-table-column>
        <el-table-column align="center" prop="allAttendMoney" label="全勤奖励" width="75"></el-table-column>
        <el-table-column align="center" prop="runAttendanceMoney" label="早退罚金" width="75"></el-table-column>
        <el-table-column align="center" prop="restAttendanceMoney" label="请假罚金" width="75"></el-table-column>
        <el-table-column align="center" prop="lateAttendanceMoney" label="迟到罚金" width="75"></el-table-column>
        <el-table-column align="center" prop="absentAttendanceMoney" label="缺勤罚金" width="75"></el-table-column>
        <el-table-column align="center" prop="workMoney" label="加班费" width="75"></el-table-column>
        <el-table-column align="center" prop="transportSalary" label="车旅费" width="75"></el-table-column>
        <el-table-column align="center" prop="taxMoney" label="税金" width="75"></el-table-column>
        <el-table-column align="center" prop="onTimes" label="正常次数" width="75"></el-table-column>
        <el-table-column align="center" prop="runAttendanceTimes" label="早退次数" width="75"></el-table-column>
        <el-table-column align="center" prop="restAttendanceTimes" label="请假次数" width="75"></el-table-column>
        <el-table-column align="center" prop="lateAttendanceTimes" label="迟到次数" width="75"></el-table-column>
        <el-table-column align="center" prop="absentAttendanceTimes" label="缺勤次数" width="75"></el-table-column>
        <el-table-column align="center" prop="workTimes" label="加班时长" width="75"></el-table-column>
        <el-table-column align="center" prop="totalMoney" label="月总结算金额" width="75"></el-table-column>
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <el-button v-show="scope.row.checktype==0&&scope.row.attendtype=='上班'" @click="startworkAttendance(scope.row)" style="padding: 3px" size="mini" type="success">上班签到</el-button>
            <el-button v-show="scope.row.checktype==0&&scope.row.attendtype=='下班'" @click="startworkAttendance(scope.row)" style="padding: 3px" size="mini" type="success">下班签到</el-button>
            <el-button v-show="scope.row.checktype==0" @click="absentAttendance(scope.row)" style="padding: 3px;color: blueviolet" size="mini" type="success">请假</el-button>
            <el-button v-show="scope.row.checktype==4&&checkInTimeBound(scope.row.checkenddate)" @click="resetAttendance(scope.row)" style="padding: 3px;color: white" size="mini" type="warning">补签</el-button>
            <el-button v-show="scope.row.checktype==1&&scope.row.attendtype=='下班'" @click="workhardAttendance(scope.row)" style="padding: 3px;color: white" size="mini" type="primary">加班</el-button>


            <!--            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除-->
            <!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>


    </div>








  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  import { readExcel } from '../../viewjs/importExcel'
  import { formatJson } from '../../viewjs/importExcel'
  export default {
    name: "DepYearManagement",

    data()
    {
      return{
        selectYear:new Date().getFullYear().toString(),
        selectMonth:(new Date().getMonth()+1).toString(),
        Emp_salary:[],
        Emp_salarys:{
          salaryOrder:"",
          userId:"",
          username:"",
          role:"",
          salaryMonth:"",
          baseMoney:"",
          allAttendMoney:"",
          runAttendanceMoney:"",
          restAttendanceMoney:"",
          lateAttendanceMoney:"",
          absentAttendanceMoney:"",
          workMoney:"",
          transportSalary:"",
          taxMoney:"",
          onTimes:"",
          runAttendanceTimes:"",
          restAttendanceTimes:"",
          lateAttendanceTimes:"",
          absentAttendanceTimes:"",
          WorkTimes:"",
          TotalMoney:""
        },
        EmployeeSalaryChange:false,
        Emp:[],
        Emps:{
          userId:"",
          username:"",
          role:"",
          departmentId:"",
          departmentName:"",
          workId:"",
          workName:"",
          baseSalary:""
        },
        changeSal:false,
        tabledatas:[],
        outputs:[],
        excelJson:[],
        xlsxJson:[],
      }
    },
    mounted() {


      this.$store.state.departmentId = window.sessionStorage.getItem("departmentId")

      this.reloadAllMonthSalary()
    },
    methods:{
      handleUpload (file,fileList) {
        this.excelJson = readExcel(file);
      },










      //定义导出Excel表格事件
      exportExcel() {
        let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
        / generate workbook object from table /;
        /* 从表生成工作簿对象 */
        let table =  document.querySelector("#out-table").cloneNode(true)
        // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
        table.removeChild(table.querySelector(".el-table__fixed-right"));
        table.removeChild(table.querySelector(".el-table__fixed"));
        let wb = XLSX.utils.table_to_book(
          table ,  //elementui 表格的id
          xlsxParam
        );

        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            JSON.stringify(this.selectYear).replace(/\"/g, "")+"年度薪资表.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },






      reloadAllMonthSalary()
      {
        // alert(JSON.stringify(this.selectYear).replace(/\"/g, "")
        //   +JSON.stringify(this.selectMonth).replace(/\"/g, ""))
        //  alert(checkmonth)
        this.$axios.post("/Employee_Salary/UpdateYearDepEmpSalary",{
          salaryMonth:this.selectYear,
          departmentId:this.$store.state.departmentId
        }).then((res)=>{
          this.Emp_salary=[],
            this.Emp_salary = res.data

          // alert(JSON.stringify(res.data).replace(/\"/g, ""))
          return this.$message.success("加载成功！")
        })
      },
      queryMonthSalary()
      {
        this.reloadAllMonthSalary()
      },
      InitEmployeeSalaryChange()
      {

        this.Emp = []
        this.$axios.post("/Employee_Salary/SelectEmpUserIdAndUsername",{

        }).then((res)=>{
          this.Emp = res.data
          // alert(JSON.stringify(this.Emp))
          this.EmployeeSalaryChange = true;
        })
      },
      changeSalary(data)
      {
        this.Emps = data
        this.changeSal = true;
      },
      changeSalByuserId()
      {
        this.$axios.post("/Employee_Salary/UpdateEmpSalary",{
          userId:this.Emps.userId,
          baseSalary:this.Emps.baseSalary
        }).then((res)=>{
          this.changeSal = false
          this.InitEmployeeSalaryChange()

          if(this.selectMonth<10)
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-0"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"
          else
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"
          //alert(checkmonth)
          this.$axios.post("/Employee_Salary/SelectAllEmployeeSalaryBySalaryMonthDescBysalaryMonth",{
            salaryMonth:checkmonth
          }).then((res)=> {
            this.Emp_salary = [],
              this.Emp_salary = res.data
            // alert(JSON.stringify(res.data).replace(/\"/g, ""))
          })
          return this.$message.success(res.data.msg)
        })
      }
    }
  }
</script>

<style scoped>

</style>
